<template>
 <div id="table1">
  <div><input type="text" placeholder="search" list="cars" class="search"> <datalist id="cars"></datalist> <input type="button" value="新增" class="add" @click="add"></div> 
  <table> 
      <tr>
    <th>id</th>
    <th>username</th>
	<th>email</th>
	<th>sex</th>
	<th>province</th>
	<th>hobby</th>
	<th>deal</th>
  </tr>
    <tr v-cloak v-for="(item, index) of tab1">
    <td>{{index+1}}</td>
    <td>{{item.username}}</td>
    <td>{{item.email}}</td>
    <td>{{item.sex}}</td>
    <td>{{item.province}}</td>
    <td>{{item.hobby.join(' | ')}}</td>
    <td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>
   </tr>
  </table>
   <overlay :isactive='isactive'></overlay>
</div>
</template>
 
<script>

import overlay from  '../overlay/overlay.vue';  
export default {
  name: 'table1',
  data(){
  return {
  isactive:false
  }
  },
  methods:{
  add:function(){
   this.isactive=true;
   console.log(this.isactive);
  },
  showOverlay:function(n){
   console.log(n);
  
  },
  del:function(i){
  console.log(n);
  }
  },
  components: {
  overlay
  },
  props:["tab1"]
  
  
}

</script>
 
<style>
 @import './table1.css';
</style>